<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权限分组管理</title>
    <link href="../static/vendor/element-ui@2.15.9/lib/theme-chalk/index.css" rel="stylesheet" />
    
    <link href="../static/eladmin/css/eladmin.min.css" rel="stylesheet" />
</head>

<body>
    <div id="app" class="list-page dark-theme" v-cloak>
        <div class="d-flex flex-column px-3" style="height:100%">
            <!-- 搜索面板 -->
            <div class="card-sm card-search mt-3 mb-1">
                <el-form :inline="true" :model="dataOfSearch.data" size="mini" label-width="77px">
                    <div class="d-flex flex-wrap">
                        <el-form-item label="主键ID">
                            <el-input v-model="dataOfSearch.data.id" placeholder="请输入主键ID" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="分组名称">
                            <el-input v-model="dataOfSearch.data.group_name" placeholder="请输入分组名称" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="分组标题">
                            <el-input v-model="dataOfSearch.data.title" placeholder="请输入分组标题" clearable></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" :loading="loadingState.search" @click="onSearch()">查询</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <div class="card-sm card-table flex-grow-1 d-flex flex-column">
                <div slot="header">
                    <!-- 工具栏 -->
                    <table-toolbar :loading-of-refresh.sync="loadingState.refresh" :title-of-print="title"
                        @click="onClickToolbar">
                    </table-toolbar>
                </div>
                <el-table :data="dataOfMain" style="width: 100%" height="100%" fixed :loading="loadingState.list"
                    @selection-change="onCheckTableRows">
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column prop="id" label="主键ID"></el-table-column>
                    <el-table-column prop="group_name" label="分组名称"></el-table-column>
                    <el-table-column prop="title" label="分组标题"></el-table-column>
                    <el-table-column prop="status" label="状态"></el-table-column>
                    <el-table-column prop="created_at" label="创建时间"></el-table-column>
                    <el-table-column prop="updated_at" label="更新时间"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="90">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="onClickToolbar('edit', scope.row)">编辑
                            </el-button>
                            <el-button type="text" size="small" @click="onClickToolbar('delete', scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagnation-bar d-flex justify-content-end">
                <el-pagination @size-change="onPaging('size', $event)" @current-change="onPaging('page', $event)"
                    :current-page="dataOfQuery.page" :page-sizes="dataOfQuery.pageSizeList"
                    :page-size="dataOfQuery.pageSize" layout="total, sizes, prev, pager, next, jumper"
                    :total="dataOfQuery.total">
                </el-pagination>
            </div>
        </div>
    </div>

    <script src="../static/vendor/vue@2.6.14/dist/vue.min.js"></script>
    <script src="../static/vendor/element-ui@2.15.9/lib/index.js"></script>
    <script src="../static/vendor/axios@0.27.2/dist/axios.min.js"></script>
    <script src="../static/vendor/mockjs@1.1.0/dist/mock.js?v=1.0.0"></script>
    <script src="../static/js/utils.min.js"></script>
    <script src="../static/mock/admin/api-route.js?v=1.0.0"></script>
    <script src="../static/mock/admin/auth-groups.js?v=1.0.0"></script>
    <script src="../static/eladmin/js/elcomponents.min.js"></script>
    <script>
        // 使用模拟数据
        useMockData();
        /**
         * 权限分组管理页面
         */
        const App = {
            el: '#app',
            name: "AuthGroupsIndex",
            data() {
                return {
                    // 页面标题
                    title: "权限分组管理",
                    // 浏览器请求参数
                    dataOfQuery: {
                        total: 0,
                        page: 1,
                        pageSize: 10,
                        pageSizeList: [10, 20, 50, 100, 1000],
                        keyword: '',
                    },
                    // 数据加载状态
                    loadingState: {
                        refresh: false,
                        search: false,
                        paging: false,
                        list: false,
                    },
                    // 可视状态
                    visibleState: {
                        search: true,
                    },
                    // 查询数据
                    dataOfSearch: {
                        data: {},
                    },
                    // 表格数据
                    dataOfMain: [],
                    // 已勾选的表格行
                    dataOfCheckedRows: [],
                    dataOfCheckedKeys: [],
                };
            },
            methods: {
                // 加载列表数据
                loadData() {
                    this.loadingState.list = true;
                    // 查询参数
                    let queryParams = {
                        page: this.dataOfQuery.page,
                        page_size: this.dataOfQuery.pageSize,
                        search_text: this.dataOfQuery.keyword,
                        _success: true, // 通过传参 _success 来控制返回消息的成功状态。
                    };
                    queryParams = Object.assign(queryParams, this.dataOfSearch.data);
                    console.log('[加载数据列表] 查询参数= ', queryParams);
                    this.vuiAjax
                        .get(this.apiRoute.authGroupsIndex, { params: queryParams })
                        .then(msgInfo => {
                            this.loadingState.refresh = this.loadingState.list = this.loadingState.search = this.loadingState.paging = false;
                            console.log("[加载数据列表] 返回结果= ", msgInfo);
                            if (!msgInfo.success) {
                                this.$message.error(msgInfo.message);
                                return;
                            }
                            this.dataOfMain = msgInfo.data.data;
                            this.dataOfQuery.total = msgInfo.data.total;
                        })
                        .catch(msgInfo => {
                            this.loadingState.refresh = this.loadingState.list = this.loadingState.search = this.loadingState.paging = false;
                            this.$message.error(msgInfo.msg);
                        });
                },
                // 表格行勾选事件
                onCheckTableRows(checkedRows) {
                    console.log("[表格行勾选事件] ", checkedRows);
                    this.dataOfCheckedRows = checkedRows;
                    this.dataOfCheckedKeys = checkedRows.map(item => item.id)
                },
                // 点击工具栏（表头工具栏和单元格工具栏）
                onClickToolbar(name, item) {
                    console.log("[点击工具栏] ", name, item);
                    switch (name) {
                        case "create":
                            console.log("点击按钮 工具栏 - 新增");
                            window.parent.globalApp.showFormDialog('新增权限分组', 'auth-groups/edit.html', window, { height: '420px' })
                            break;
                        case "edit-multi":
                            console.log("点击按钮 工具栏 - 批量编辑", this.dataOfCheckedKeys.join(','));
                            break;
                        case "copy-multi":
                            console.log("点击按钮 工具栏 - 批量复制", this.dataOfCheckedKeys.join(','));
                            break;
                        case "delete-multi":
                            console.log("点击按钮 工具栏 - 批量删除", this.dataOfCheckedKeys.join(','));
                            if (this.dataOfCheckedKeys.length == 0) {
                                this.$message.info('未勾选任何记录');
                                return;
                            }
                            this.$confirm('您确定删除' + this.dataOfCheckedKeys.length + '条记录吗?', '提示', {
                                confirmButtonText: '删除',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                this.vuiAjax
                                    .get(this.apiRoute.authGroupsDelete, { params: { id: this.dataOfCheckedKeys } })
                                    .then((msgInfo) => {
                                        console.log("[批量删除] ", msgInfo);
                                        if (!msgInfo.success) {
                                            this.$message.error(msgInfo.message);
                                            return;
                                        }
                                        this.loadData();
                                    })
                                    .catch((msgInfo) => {
                                        this.$message.error(msgInfo.msg);
                                    });
                            });

                            break;
                        case "import":
                            console.log("点击按钮 工具栏 - 导入");
                            // 设置导入表单参数等
                            break;
                        case "export":
                            console.log("点击按钮 工具栏 - 导出");
                            break;
                        case "refresh":
                            console.log("点击按钮 工具栏 - 刷新");
                            this.loadingState.refresh = true;
                            this.loadData();
                            break;
                        case "edit":
                            console.log("点击按钮 单元格 - 编辑");
                            window.parent.globalApp.showFormDialog('编辑权限分组', 'auth-groups/edit.html?id=' + item.id, window, { height: '420px' })
                            break;
                        case "delete":
                            console.log("点击按钮 单元格 - 删除");
                            break;
                        case "copy":
                            console.log("点击按钮 单元格 - 复制");
                            break;
                        default:
                            break;
                    }
                },
                // 查询操作
                onSearch() {
                    this.loadingState.search = true;
                    this.loadData();
                },
                // 分页事件
                onPaging(type, val) {
                    this.loadingState.paging = true
                    console.log('[分页事件] ', type, val);
                    switch (type) {
                        case 'page':
                            this.dataOfQuery.page = val;
                            break;
                        case 'size':
                            this.dataOfQuery.page = 1;
                            this.dataOfQuery.pageSize = val;
                            break;
                        default:
                            break;
                    }
                    this.loadData();
                },
                // 导入数据
                onImportExcel(success, msgInfo) {
                    if (!success) {
                        this.$message.error(msgInfo.message);
                        return;
                    }
                    console.log("[导入数据] 上传成功 ", msgInfo);
                },
            },
            created() {
                this.loadData();
            },
        };
        // 全局加载组件
        Vue.prototype.apiRoute = new ApiRoute();
        Vue.prototype.vuiAjax = EsUtils.getStdAjax(); // 获取标准消息格式的 axios 实例
        Vue.use(ElComponents);
        // 创建应用实例
        var app = new Vue(App)
    </script>
</body>

</html>